<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  type: 'home',
  needLogin: false,
  style: {
    "navigationBarTitleText": "首页",
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="index-box">
    <image class="bg" src="/static/icon/bg2.png" mode="widthFix"></image>
    <!-- 导航栏 -->
    <wd-navbar title="首页" custom-class="custom-navbar"></wd-navbar>
    <!-- 天气 -->
    <view class="card card-weather mx-4 my-2 pa-2">
      <view
        class="card-col ma-2 py-4"
        :class="{ 'is-active': index === 0 }"
        v-for="(item, index) in weather"
        :key="index"
      >
        <view class="text-xs color-dark" :class="{ 'color-white font-semibold': index === 0 }">
          {{ item.week }}
        </view>
        <view class="text-xs font-light mt-2" :class="{ 'color-white font-normal': index === 0 }">
          {{ item.date }}
        </view>
        <view class="text-sm color-dark mt-2" :class="{ 'color-white ': index === 0 }">
          {{ item.wea }}
        </view>
        <wd-img class="w-img mt-2" height="56rpx" mode="heightFix" :src="item.icon" />
        <view class="text-sm color-dark mt-2" :class="{ 'color-white  ': index === 0 }">
          {{ item.tem }}
        </view>
      </view>
    </view>
    <!-- 轮播区 -->
    <wd-swiper
      v-if="swiperList.length>0"
      custom-class="mx-4"
      :list="swiperList"
      autoplay
      @click="handleClick"
    ></wd-swiper>
    <!-- 河流信息 -->
    <view class="card mx-4 my-2 pa-4">
      <view class="flex items-center">
        <wd-img width="40rpx" height="40rpx" src="/static/icon/icon1.svg" />
        <view class="text-sm color-black font-semibold flex-1 ml-2">江溪河道全域</view>
        <view class="text-xs color-grey">河流信息</view>
        <wd-icon name="arrow-right" color="#A3A3A3" size="24rpx"></wd-icon>
      </view>
    </view>
    <!-- 事件总览 -->
    <view class="card mx-4 my-2 pa-4">
      <view class="flex items-center">
        <wd-img width="40rpx" height="40rpx" src="/static/icon/icon2.svg" />
        <view class="text-sm color-black font-semibold flex-1 ml-2">事件总览</view>
        <view class="text-xs color-grey">查看更多</view>
        <wd-icon name="arrow-right" color="#A3A3A3" size="24rpx"></wd-icon>
      </view>
      <wd-grid custom-class="mt-4">
        <wd-grid-item use-slot>
          <view class="text-2xl font-medium color-blue">106</view>
          <view class="text-xs color-gray mt-1">已处理</view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="text-2xl font-medium color-black">0</view>
          <view class="text-xs color-gray mt-1">进行中</view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="text-2xl font-medium color-black">0</view>
          <view class="text-xs color-gray mt-1">未处理</view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="text-2xl font-medium color-black">0</view>
          <view class="text-xs color-gray mt-1">事件总量</view>
        </wd-grid-item>
      </wd-grid>
    </view>
    <!-- 地图 -->
    <view class="card mx-4 my-2" style="height: 356rpx">
       <map
        id="myMap"
        style="width: 100%; height: 100%"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        show-location
      ></map>
    </view>
    <!-- 水质自测数据 -->
    <view class="card mx-4 my-2 pa-4">
      <view class="flex items-center">
        <wd-img width="40rpx" height="40rpx" src="/static/icon/icon3.svg" />
        <view class="text-sm color-black font-semibold flex-1 ml-2">水质自测数据</view>
      </view>
      <view class="river-drop flex mt-3">
        <view class="river-label">选择河道</view>
        <view class="flex-1">
          <wd-picker
            v-model="river"
            :columns="riverOptions"
            placeholder="请选择河道"
            value-key="id"
            label-key="title"
          />
        </view>
      </view>
      <view class="river-data mt-3">
        <view class="flex items-center pa-3 pb-0">
          <view class="block"></view>
          <view class="text-sm color-base font-semibold ml-2">梅东河监测站数据</view>
        </view>
        <wd-grid :gutter="10">
          <wd-grid-item use-slot>
            <view class="text-xs color-gray">氨氮</view>
            <view class="color-base mt-1">
              <text class="text-base font-semibold">0.69</text>
              <text class="text-xs ml-1">mg/L</text>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot>
            <view class="text-xs color-gray">总磷</view>
            <view class="color-base mt-1">
              <text class="text-base font-semibold">0.24</text>
              <text class="text-xs ml-1">mg/L</text>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot>
            <view class="text-xs color-gray">COD</view>
            <view class="color-base mt-1">
              <text class="text-base font-semibold">18</text>
              <text class="text-xs ml-1">mg/L</text>
            </view>
          </wd-grid-item>
        </wd-grid>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const weather = ref([])
const current = ref<number>(0)
const swiperList = ref([])
const river = ref<number>(0)
const riverOptions = ref([])

// 天气数据
const getWeatherData = async () => {
  weather.value = [
    {
      week: '今天',
      date: '06/23',
      wea: '晴',
      tem: '18°',
      icon: '/static/icon/wea1.svg',
    },
    {
      week: '周六',
      date: '06/23',
      wea: '多云',
      tem: '18°',
      icon: '/static/icon/wea2.svg',
    },
    {
      week: '周六',
      date: '06/23',
      wea: '阴',
      tem: '18°',
      icon: '/static/icon/wea3.svg',
    },
    {
      week: '周六',
      date: '06/23',
      wea: '小雨',
      tem: '18°',
      icon: '/static/icon/wea4.svg',
    },
    {
      week: '周六',
      date: '06/23',
      wea: '大雨',
      tem: '18°',
      icon: '/static/icon/wea5.svg',
    },
  ]
}
// 轮播图数据
const getSwiperData = async () => {
  swiperList.value = [
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  ]
}
const handleClick = (e: any) => {
  console.log(e)
} 
// 河道
const getRiverData = async () => {
  river.value = 1
  riverOptions.value = [
    { title: '全部河道', id: 0 },
    { title: '河道1', id: 1 },
    { title: '河道2', id: 2 },
  ]
}
const handleRiverChange = ({ value }) => {
  console.log(value)
}

const latitude = 22.540261
const longitude = 113.944855
// 标记点
const markers = ref([
  {
    id: 1,
    latitude: 22.540261,
    longitude: 113.944855,
    iconPath: '/static/map/dot.png',
    selectedIconPath: '/static/map/dot-active.png',
    width: 15,
    height: 15,
  },
  {
    id: 2,
    latitude: 22.535261,
    longitude: 113.949855,
    iconPath: '/static/map/dot.png',
    selectedIconPath: '/static/map/dot-active.png',
    width: 15,
    height: 15,
  },
])
onMounted(() => {
  getWeatherData()
  getSwiperData()
  getRiverData()
})
</script>

<style lang="scss">
// text-xs font-size:12px
// text-sm font-size:14px
// text-base font-size:16px
// text-lg font-size:18px
// text-xl font-size:20px
// text-2xl font-size:24px
// font-light  font-weight: 300;
// font-normal  font-weight: 400;
// font-medium  font-weight: 500;
// font-semibold  font-weight: 600;
// font-bold  font-weight: 700;
page {
  padding-top: 88rpx;
  background: #f4f8fb;
  padding-bottom: 2rpx;
  /* #ifdef H5 */
  padding-top: 0;
  padding-bottom: 180rpx;
  min-height: calc(100vh - 180rpx);
  /* #endif */
}
$navbar-height: 88rpx;
$base-color: #2b2e48;
$black-color: #000;
$dark-color: #363b64;
$secondaru-color: #a098ae;
$white-color: #fff;
$grey-color: #a3a3a3;
$gray-color: #5b5b5b;
$light-color: #f7f8fa;
$primary-color: #2953ff;
$primary-light-color: #52bfff;
.color-black {
  color: $black-color;
}
.color-base {
  color: $base-color;
}
.color-dark {
  color: $dark-color;
}
.color-secondaru {
  color: $secondaru-color;
}
.color-white {
  color: $white-color;
}
.color-grey {
  color: $grey-color;
}
.color-gray {
  color: $gray-color;
}
.color-blue {
  color: $primary-color;
}
.no-padding {
  padding: 0 !important;
}

:deep(.custom-navbar.wd-navbar) {
  background: transparent;
  height: $navbar-height !important;
  line-height: $navbar-height;
  &::after {
    height: 0 !important;
  }
  .wd-navbar__title {
    color: $white-color;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.bg{
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%;
}
.card {
  background: #fff;
  border-radius: 24rpx;
  position: relative;
  overflow: hidden;
}
.card-weather {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  .card-col {
    text-align: center;
  }
  .is-active {
    border-radius: 200rpx;
    background: linear-gradient(127.46deg, $primary-light-color 21.69%, $primary-color 78.31%);
  }
}
:deep(.river-drop) {
  height: 64rpx;
  border-radius: 12rpx;
  overflow: hidden;
  .river-label {
    color: $white-color;
    background: $primary-color;
    font-size: 26rpx;
    line-height: 64rpx;
    width: 140rpx;
    text-align: center;
  }
  .wd-picker {
    height: 64rpx;
    .wd-cell {
      background: $light-color;
    }
    .wd-cell__wrapper {
      padding: 0 20rpx 0 0;
      height: 64rpx;
      align-items: center;
    }
  }
}
:deep(.river-data) {
  background: $light-color;
  border-radius: 14rpx;
  .block {
    width: 12rpx;
    height: 12rpx;
    background: #fcca1e;
  }
  .wd-grid-item {
    border-radius: 14rpx; 
  }
  .wd-grid-item__content {
    padding: 20rpx !important;
    text-align: left;
    border-radius: 18rpx;
  }
}
</style>
